<template>
<q-dialog v-model="show" position="right" class="footprint-dialog" full-height>
  <q-scroll-area :thumb-style="thumbStyle" class="full-height footprint-scroll">
    <q-list style="width: 200px" class="bg-white foot-print-list">
      <q-item clickable v-close-popup v-for="(item,index) in footprint" :key="index"
              @click='goPage(item.link)' style="padding-right: 0" class="foot-print-item">
        <q-item-section style="height: 36px">
          <q-item-label class="ellipsis">{{item.name}}</q-item-label>
        </q-item-section>
        <q-item-section side style="padding-left: 0;line-height: 36px;margin-right: 10px" class="remove-btn">
          <q-btn @click.stop="removeFootprint(item)" round flat size="xs"
                 icon="iconfont icontubiao-67"  />
          <!--                  <q-icon @click="removeFootprint" name="iconfont icontubiao-67" style="font-size: 16px;" />-->
        </q-item-section>
      </q-item>
    </q-list>
  </q-scroll-area>
</q-dialog>
</template>

<script>

export default {
  name: 'footprint-dialog',
  props: {
    footprint: {
      type: Array
    }
  },
  data () {
    return {
      show: false,
      thumbStyle: this.CommonConfig.thumbStyle // 滚动条样式
    }
  },
  methods: {
    showDialog () {
      this.show = true
      console.log(this.footprint)
    },
    hideDialog () {
      this.show = false
    },
    // 页面跳转
    goPage (link) {
      this.$router.push(link)
      this.hideDialog()
    },
    removeFootprint (item) {
      this.$emit('removeFootprint', item)
    }
  }
}
</script>

<style scoped lang="stylus">
.footprint-scroll{
  width 200px
}
.foot-print-list{
  border-radius 0
  height 100vh
  .remove-btn{
    display none
  }
  .foot-print-item:hover{
    .remove-btn{
      display block
    }
  }
}
</style>
